<!-- 手机登录 -->
<template>
  <div class="login_item">
    <div class="mobile_number_item">
      <div class="mobile_number_L">手机号码</div>
      <div class="mobile_numberLive"></div>
      <div class="mobile_number_R">
        <input type="text" placeholder="请输入手机号码" v-model="userInfo.phoneNumber" />
      </div>
    </div>
    <div class="mobile_code_item">
      <div class="mobile_number_L">
        <input type="text" placeholder="短信验证码" v-model="userInfo.code" @keyup.enter="goLogin" />
      </div>
      <div class="mobile_number_R changeHanld" v-if="showCode" @click="getCode">获取验证码</div>
      <div class="mobile_number_R" v-if="!showCode">{{ val }}秒后重新发送</div>
    </div>
    <button @click="goLogin" class="changeHanld">登录/注册</button>
  </div>
</template>

<script>
import { commonRequest, postRequest } from "../../api/api.js";
import { mapActions, mapMutations } from "vuex";
import { setToken } from "../../util/validate.js";

export default {
  components: {},
  data() {
    //这里存放数据
    return {
      userInfo: {
        phoneNumber: "", // 手机号码
        code: "" // 验证码
      },
      showCode: true, // 显示文字
      val: 60
    };
  },
  mounted() {
    // console.log(this.$router);
  },
  methods: {
    ...mapActions(["hanldCodeLogin"]),
    ...mapMutations(["setBackName", "setIsShow"]),

    goLogin() {
      let { phoneNumber, code } = this.userInfo;
      if (!phoneNumber || !code) {
        this.$message({
          type: "warning",
          message: "请输入手机您的号码或验证码"
        });
        return;
      }
      let data = {
        phoneNumber,
        code
      };
      this.hanldCodeLogin(data).then(res => {
        if (!res) {
          let backName = this.$store.state.backName;
          this.$message.success({
            message: backName ? "登录成功,跳转页面" : "登录成功",
            type: "success"
          });
          const time = new Date().getTime() + 24 * 60 * 60 * 1000 * 7;
          // const time = new Date().getTime();
          localStorage.setItem("endTime", time);
          if (backName) {
            this.setBackName("");
            setTimeout(() => {
              this.$router.back();
            }, 3000);
          } else {
            this.setIsShow(false);
            this.$emit("jieshou", false);
            this.$router.push("/");
          }
        } else {
          this.$message({
            message: res.message,
            type: "warning"
          });
        }
      });
    },
    // 点击倒计时
    getCode() {
      if (this.userInfo.phoneNumber == "") {
        this.showCode = true;
        this.$message({
          type: "warning",
          message: "请输入手机您的号码"
        });
        return;
      }
      let times = null;
      this.showCode = false;
      this.getphoneCode();
      times = setInterval(() => {
        this.val--;
        if (this.val == 0) {
          this.val = 60;
          this.showCode = true;
          clearInterval(times);
        }
      }, 1000);
    },
    // 获取验证码
    getphoneCode() {
      commonRequest(
        "/api/ums/umsUsers/sendVerificationCode?type=Login&phoneNumber=" +
          this.userInfo.phoneNumber
      ).then(res => {
        // console.log(res);
        if (res == "成功!") {
          this.$message({
            type: "success",
            message: "发送成功,请注意查收"
          });
        } else {
          this.$message({
            type: "warning",
            message: "发送失败,请重试"
          });
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
//@import url(); 引入公共css类
.login_item {
  display: flex;
  padding: 0 30px;
  flex-direction: column;
  justify-content: center;
  .mobile_number_item,
  .mobile_code_item {
    display: flex;
    align-items: center;
    height: 50px;
    border-bottom: 1px solid #ccc;
  }
  .mobile_number_item {
    .mobile_number_L {
      width: 60px;
      font-size: 14px;
    }
    .mobile_numberLive {
      //   width: 1px;
      //   height: 40px;
      //   background-color: #ccc;
      margin: 0 10px;
    }
    .mobile_number_R {
      flex: 1;
      input {
        font-size: 16px;
        color: #000;
        &::placeholder {
          color: #ccc;
        }
      }
    }
  }
  .mobile_code_item {
    .mobile_number_L {
      flex: 1;
      input {
        font-size: 16px;
        color: #000;
        &::placeholder {
          color: #ccc;
        }
      }
    }
    .mobile_number_R {
      font-size: 14px;
      color: #44a2ff;
    }
  }
  button {
    margin: 40px auto;
    width: 300px;
    height: 40px;
    font-size: 16px;
    padding: 10px auto;
    // color: ;
    font-weight: 700;
    border-radius: 6px;
    background-color: #44a2ff;
    color: #fff;
  }
}
</style>
